﻿/**
 *	html/pem_north.js
 *
 *	(C) 2014 Yuanjj
 *
 * 	history:
 * 		2014-07-07		create the file
 */

/**
 *	create north panels
 *
 *	@north		[in] the north panel object
 */
function _create_subpanel_for_north( panel_north )
{
    var panel_banner 	= _create_banner_panel();
    var panel_toolbar	= _create_toolbar_panel();

    panel_north.add_subpanel( panel_banner );
    panel_north.add_subpanel( panel_toolbar );
}

/**
 *	create the banner panel
 *
 *	return:
 *		the banner panel object
 */
function _create_banner_panel()
{
    var panel_banner = new Ext.toolbar.Toolbar
    ({
         id:"panel_banner",
         height:100,
         frame:true,
         width:"100%",
         layout:"fit",
         html:"<br><br><center><font size = 6>PEM System</font></center>"
    });

    return panel_banner;
}

/**
 *	create the button tool bar panel
 *
 *	return:
 *		the banner panel object
 */
function _create_toolbar_panel()
{
    var panel_toolbar = new Ext.toolbar.Toolbar
    ({
         id:"panel_toolbar",
         height:100,
         width:"100%",
         items:[
             _create_ico_button( "btn_env_monitor", "./res/camaro.jpg", "环境检测" ),
             _create_ico_button( "btn_security_monitor", "./res/corvette.jpg", "安防监控" ),
             _create_ico_button( "btn_video_monitor", "./res/f150.jpg", "视频监控" ),
             _create_ico_button( "btn_option_manage", "./res/world cup.jpg", "配置管理" ),
             _create_ico_button( "btn_alarm_event", "./res/tahoe.jpg", "事件与报警" ),
             _create_ico_button( "btn_system_manage", "./res/loading.gif", "系统管理" )
         ]
         /*
         items:[
             {
                 xtype:"buttongroup",
                 items:[
                     _create_ico_button( "btn_env_monitor", "./res/camaro.jpg", "环境检测" ),
                     _create_ico_button( "btn_security_monitor", "./res/corvette.jpg", "安防监控" ),
                     _create_ico_button( "btn_video_monitor", "./res/f150.jpg", "视频监控" ),
                     _create_ico_button( "btn_option_manage", "./res/world cup.jpg", "配置管理" ),
                     _create_ico_button( "btn_alarm_event", "./res/tahoe.jpg", "事件与报警" ),
                     _create_ico_button( "btn_system_manage", "./res/loading.gif", "系统管理" )
                 ]
             }
         ]
         */
    });

    /*
    panel_toolbar.add( _create_ico_button( "btn_env_monitor", "./res/camaro.jpg", "环境检测" ) );
    panel_toolbar.add( _create_ico_button( "btn_security_monitor", "./res/corvette.jpg", "安防监控" ) );
    panel_toolbar.add( _create_ico_button( "btn_video_monitor", "./res/f150.jpg", "视频监控" ) );
    panel_toolbar.add( _create_ico_button( "btn_option_manage", "./res/world cup.jpg", "配置管理" ) );
    panel_toolbar.add( _create_ico_button( "btn_alarm_event", "./res/tahoe.jpg", "事件与报警" ) );
    panel_toolbar.add( _create_ico_button( "btn_system_manage", "./res/loading.gif", "系统管理" ) );
    */

    return panel_toolbar;
}

/**
 *	create ico button tool bar panel
 *
 *	@id			[in] the id added to button
 *	@img		[in] the img added to button
 *	@text		[in] the button text
 *
 *	return:
 *		the button object
 */
function _create_ico_button( id, img, text )
{
    var htmltext =	"<div style=\"text-align:center\" >" +
                        "<img src=\"" + img + "\" style=\"height:60px;width:80px\" />" +
                    "</div>" +
                    "<div style=\"text-align:center\">" + text + "</div>";

    //var ico_button = new Ext.panel.Panel
    var ico_button = new Ext.button.Button
    ({
         id:id,
         html:htmltext,
         height:85,
         width:100,
         top:0,
         frame:true,
         //enableToggle:true,
         listeners:{
             //scope:this,
             el:{
                 click:on_ico_button_click,
                 mousedown:on_mouse_down,
                 mouseover:on_mouse_over
             }
         }
    });

    return ico_button;
}

function on_mouse_down( e, a )
{
    //alert( "mousdown" );
}

function on_mouse_over( e, a )
{
    e.stopEvent();
    //alert( "mouseon" );
}

/**
 *	call back for button click
 *
 *	@e			[in] the event
 */
function on_ico_button_click( e, a )
{
    var		node_data;
    // show the west panel
    node_data = g_panel_main.panel_monitor.panel_west.show_subpanel( g_btn_tree_map[this.id] );

}
